<template>
    <ul class="wioc-list-select-type">
        <li :key="'t'+index" v-for="(item,index) in selectlist" >
           <div>
              <h3>{{item.typeName}}</h3>
           </div>
           <dl>
               <dd :class="currentSelect==i?'active':''" :key="'d'+idx" v-for="(i,idx) in item.data" @click="select(i)">
                   <h4 v-html="i.name"></h4>
               </dd>
           </dl>
        </li>
    </ul>
</template>


<script>
    export default {
        name:"wioc-list-select-type",
        components:{

        },
        data(){
            return{
				currentSelect:this.defaultSelect
            }
        },
        props:{
            selectlist:Array,
			defaultSelect:{
				type:Object
			}
        },
		created(){

		},
		methods:{
			select (item) {
			    this.currentSelect = item
			    this.$emit('checkedList',this.currentSelect)
			}
			
		}
    }

</script>

<style lang="less" scoped>
.wioc-list-select-type{
	li{
		div{
			display: flex;
			justify-content: space-between;
			background-color: #ebedf8;
			align-items: center;
			padding: 0 0.1rem;
			margin-bottom: 0.05rem;
			h3{
				font-size: 0.11rem;
				line-height: 0.22rem;
				font-weight: normal;
				color:#979797;

			}
			span{
				display: inline-flex;
				width:0.2rem;
				height:0.22rem;
				text-align:right;
				align-items: center;
				transition: all 0.5s ease;
			   .icon-svg{
				   display: inline-flex;
				   width: 0.1rem;
				   height:0.1rem;
				   line-height: 0.22rem;
				   transform: rotateX(0deg);
			   }
			}
		}

		dl{
			width:90%;
			margin:0 auto;
			dd{
				font-size: 0.12rem;
				color: #595959;
				border-bottom: 0.01rem solid #EBEDF8;
				transition: all 0.2s;
				h4{
					font-weight: normal;
					line-height: 0.3rem;
					small{
						font-size:0.1rem;
						font-weight: normal;
					}
				}
				&.active{
					color: #4BA0F3;
					position:relative;
					&:after{
						display: block;
						position:absolute;
						top:50%;
						transform: translateY(-50%);
						right:0.1rem;
						width: 0.16rem;
						height:0.16rem;
						vertical-align: middle;
						background-image:url();
						background-repeat: no-repeat;
						background-size:100% 100%;
						content: "";
					}
				}
				&:last-child{
					border-bottom:none ;
				}
			}
		}
	}
}	

</style>
